<template>
  <view class="message-page">
    <view class="filter-bar">
      <view class="filter-item-left">
        <view>请选择时间：</view>
        <!-- <image src="/static/index/groups.png" mode="widthFix" class="active-line-img"> -->
        <!-- </image> -->
      </view>
      <view class="filter-item">
        <view class="filter-item-content" @click="handleFilter(2)">
          <view>{{query.reportBeginTime.split(' ')[0]}}</view>
          <view class="decline" v-if="query.reportBeginTime!=''||query.reportEndTime!=''">-</view>
          <view>{{query.reportEndTime.split(' ')[0]}}</view>
          <view class="img" v-if="query.reportBeginTime!=''||query.reportEndTime!=''" @click.stop="delFilter()">
            <image src="/static/index/delete.png" mode="aspectFit" />
          </view>
        </view>
      </view>
    </view>
    <!-- 消息列表 -->
    <scroll-view scroll-y class="message-scroll" @scrolltolower="onReachBottom"
      :style="{ height: scrollHeight + 'px' }">
      <view class="message-list" v-for="(item, index) in dataList" :key="index">
        <view class="message-item">
          <view class="message-content">
            <view>温度：</view>
            <view>{{item.temperature||'0'}}℃</view>
          </view>
          <view class="message-content">
            <view>湿度：</view>
            <view>{{item.humidity||'0'}}%rh</view>
          </view>
          <view class="message-content">
            <view>记录时间：</view>
            <view>{{item.reportTime||'-'}}</view>
          </view>
        </view>
      </view>
      <!-- 空状态 -->
      <view class="empty-state" v-if="!dataList?.length">
        <text>暂无记录</text>
      </view>
      <!-- 加载状态 -->
      <view class="loading-state" v-if="dataList?.length">
        <text>{{status === 'loadmore' ? '加载中...' : '没有更多了'}}</text>
      </view>
    </scroll-view>
  </view>

  <wu-calendar mode="range" ref="calendar" :rangeSameDay="true" @confirm="confirmDate" :endDate="maxDate"
    :monthShowCurrentMonth="false" slideSwitchMode="none" :clearDate="true" :insert="false"></wu-calendar>
</template>

<script setup>
  import {
    ref,
    onMounted
  } from 'vue'
  import {
    getTemperatureList
  } from '@/api/index'
  import { onLoad, onShow } from '@dcloudio/uni-app'

  // 消息列表数据
  const dataList = ref([])
  const query = ref({
    pageNum: 1,
    pageSize: 10,
    cabinetId: '',
    reportBeginTime: '',
    reportEndTime: ''
  })
  const total = ref(0)
  const calendar = ref(null)
  const status = ref('loadmore')
  const scrollHeight = ref(0)

  // 计算滚动区域高度
  const calculateScrollHeight = () => {
    const systemInfo = uni.getSystemInfoSync()
    const filterBarHeight = 100 // 筛选栏高度
    scrollHeight.value = systemInfo.windowHeight - filterBarHeight
  }

  // 获取消息列表
  const getList = async () => {
    try {
      uni.showLoading({
        title: '加载中...',
        duration: 1500,
      })
      query.value.cabinetId = uni.getStorageSync('machineInfo').id

      query.value.reportBeginTime = query.value.reportBeginTime ? query.value.reportBeginTime + " 00:00:00" : '';
      query.value.reportEndTime = query.value.reportEndTime ? query.value.reportEndTime + " 23:59:59" : '';
      console.log(query.value, 'query.value---------------')
      const res = await getTemperatureList(query.value)
      if (res.code == 200) {
        dataList.value = query.value.pageNum == 1 ? res.rows : dataList.value.concat(res.rows)
        total.value = res.total || 0
        // 更新加载状态
        status.value = dataList.value.length >= total.value ? 'nomore' : 'loadmore'
        uni.hideLoading()
      }
    } catch (error) {
      console.error('获取列表失败：', error)
      uni.hideLoading()
    }
  }

  // 上拉加载
  const onReachBottom = () => {
    if (status.value === 'loadmore') {
      query.value.pageNum++
      getList()
    }
  }

  onMounted(() => {
    calculateScrollHeight()
    getList()
  })

  // 处理筛选
  const handleFilter = (filter) => {
    if (calendar.value) {
      calendar.value.open()
    }
  }
  const delFilter = () => {
    query.value.reportBeginTime = ''
    query.value.reportEndTime = ''
    query.value.pageNum = 1
    getList()
  }
  // 跳转到消息详情
  const toDetail = (item) => {
    uni.navigateTo({
      url: `/pages/index/messageDetail?item=${JSON.stringify(item)}`
    })
  }

  // 返回上一页
  const goBack = () => {
    uni.navigateBack()
  }
  const confirmDate = (e) => {
    if (e.range && e.range.before) {
      query.value.reportBeginTime = e.range.before
      query.value.reportEndTime = e.range.after ? e.range.after : e.range.before
      query.value.pageNum = 1
      getList()
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .message-page .filter-bar .filter-item {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  .filter-bar {
    display: flex;
    align-items: center;
    margin: 30rpx 10rpx 0;
    width: 90%;
    padding: 0 24rpx 20rpx;
    position: relative;

    .filter-item {
      flex: 1;
      font-size: 28rpx;
      color: #000;

      position: relative;

      .filter-item-content {
        background: #fff;
        padding: 10rpx 26rpx;
        display: flex;
        align-items: center;
        min-height: 40rpx;
        position: relative;
        width: 92%;
        margin-left: 10rpx;
        border-radius: 20rpx;
        color: #666;

        view {
          text-align: center;
          width: 70%;
        }

        .decline {
          width: 20%;
        }

        text {
          font-size: 30rpx;
        }

        .img {
          width: 32rpx;
          padding-top: 8rpx;

          image {
            width: 32rpx;
            height: 32rpx;
          }

        }

        .active-line-img {
          width: 28rpx;
          height: 28rpx;
          margin-left: 8rpx;
          transform: rotate(180deg);
          transition: transform 0.5s ease;
        }
      }

      &.active {

        .active-line-img {
          transform: rotate(0deg);
        }
      }
    }
  }

  .message-page {
    height: 100vh;
    background: #F3F3F3;
    display: flex;
    flex-direction: column;

    .message-scroll {
      flex: 1;
      overflow-y: auto;
    }

    .message-list {
      padding: 0rpx 22rpx 20rpx 22rpx;

      .message-item {
        background: #FFFFFF;
        border-radius: 20rpx;
        padding: 24rpx 30rpx;
        position: relative;

        .message-content {
          display: flex;
          font-size: 28rpx;
          align-items: center;
          justify-content: space-between;
          color: #666;
          margin-bottom: 16rpx;
          line-height: 1.5;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 200rpx;

      image {
        width: 200rpx;
        height: 200rpx;
        margin-bottom: 20rpx;
      }

      text {
        font-size: 28rpx;
        color: #999;
      }
    }

    .loading-state {
      text-align: center;
      padding: 20rpx 0;
      color: #999;
      font-size: 24rpx;
    }
  }
</style>